import { useState, useCallback, useMemo, useDebugValue, useId } from "react";

//自定义hook
const useCustom=()=>{
  useDebugValue('惠妹真漂亮！！！')
}

export default function CallBack() {
  const [count, setCount] = useState(0);
  const [value1, setValue] = useState(0);
  const id=useId()
  //使用这个自定义hook
  useCustom()

  // const getValue = useCallback(() => {
  //   const value = count + 1;
  //   return value;
  // }, []);


  
  const getValue = useCallback(() => {
    const value = count + 1;
    return value;
  }, [count]);


  const doubleValue = useMemo(() => {
    return value1 * 2;
  }, [value1]);


  const value = getValue();
  console.log(value);

  return (
    <>
    <br />
    <label htmlFor={id}>名字：</label>
    <input type="text" id={id} />
    <br />
      <div style={{ color: "red" }}>{value}</div>
      <button onClick={() => setCount(count + 1)}>点击加1 看上面的值</button>
      <div style={{ color: "red" }}>{doubleValue}</div>
      <button onClick={() => setValue(value1 + 1)}>点击加倍 看上面的值</button>
    </>
  );
}
